<template>
	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-main" :isBack="true">
			<block class="text-white" slot="content">教练详细</block>
		</cu-custom>

		<view v-if="ajiaolian.imgs && ajiaolian.imgs.length > 0">
			<swiper class="screen-swiper" :indicator-dots="true" :circular="true" :autoplay="true" interval="2000"
				duration="500">
				<swiper-item v-for="(item, index) in ajiaolian.imgs" :key="index">
					<image :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="cu-card case">
			<view class="cu-list menu-avatar">
				<view class="cu-item">
					<view v-if="ajiaolian.cover" class="cu-avatar round lg" :style="{ backgroundImage: `url(${ajiaolian.cover})` }"></view>
					<view class="content">
						<view class="flex justify-start">
							<text>{{ ajiaolian.jlname ? ajiaolian.jlname : "这个教练很懒，没有设置名称" }}</text>
							<!-- <view>
								<view v-for="(lxname, index) in ajiaolian.kclx" :key="index"
									class="cu-tag round df bg-gradual-main margin-left-sm">{{ lxname }}</view>
							</view> -->
						</view>
						<view>
							<uni-rate size="15" readonly="true" v-model="ajiaolian.count" max="5"></uni-rate>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view v-if="kcnumber > 0" class="margin-top bg-white">
			<view class="padding solid-bottom flex justify-between align-baseline">
				<view class="text-orange title">
					<text class="text-xxl  ">
						<text class="iconfont icon-kecheng"></text>
					</text>
					<text>课程</text>
					<text class="">【{{kcnumber}}】</text>
				</view>
				<view @tap="goToKcList" class="text-main">
					<text class=" ">更多</text>
					<text class="  ">
						<text class="iconfont icon-arrowright"></text>
					</text>
				</view>
			</view>
			<view>
				<view v-if="index < 4" v-for="(kc, index) in kcs" :key="index">
					<view class="cu-card case">
						<view @tap="toKcDetail(kc.kcid)" class="cu-item shadow bg-white">
							<view class="image">
								<image :src="kc.cover" mode="widthFix"></image>
								<view class="absolute top0 right0 bg-main padding-xs">
									<text class="text-sm">{{lxmap[kc.kclxid].lxname}}</text>
								</view>
								<view class="absolute bg-red top0 left0 padding-xs">
									<text class="text-sm">{{kczt[kc.zt]}}</text>
								</view>
								<view class="kctitle bg-main">
									<text class="text-cut text-lg padding-sm">{{kc.kcname}} 共计（{{kc.cs}}）课时</text>
									<!-- <text @tap="toStoreDetail(kc.storeid)" class="text-cut text-sm cuIcon-homefill">{{kc.sname}}<text class="cuIcon-right"></text></text>
									<text @tap="toRoomDetail(kc.roomid)" class="text-cut text-sm cuIcon-noticefill">{{kc.rname}}<text
											class="cuIcon-right"></text></text> -->
									<view class="text-sm flex justify-between align-baseline">
										<text>{{kc.st}}~{{kc.et}}</text>
										<view class="text-sm">
											<text class="cuIcon-myfill">{{kc.ybrs}}</text>
											<text class="cuIcon-my margin-left-sm">{{kc.zxrs}}</text>
											<text class="cuIcon-friend margin-left-sm">{{kc.zdrs}}</text>
										</view>
									</view>
								</view>
								
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>

		<view v-if="ahylxs.length > 0" class="margin-top bg-white">
			<view class="padding solid-bottom flex justify-start align-baseline">
				<view class="text-orange title">
					<text class="text-xxl  ">
						<text class="iconfont icon-huiyuanleixing"></text>
					</text>
					<text>会员类型</text>
					<text class="">【{{ahylxs.length}}】</text>
				</view>
			</view>
			<view class="padding-bottom-sm">
				<view v-for="(hylx, index) in ahylxs" :key="index">
					<view class="margin-sm shadow bg-white padding-xs">
						<view class="padding-xs flex justify-between">
							<text>{{ hylx.hlname }}</text>
							<text>￥{{ hylx.amount / 100 }}</text>
						</view>
						<view class="padding-xs flex justify-between">
							<text>{{ hylx.cs }}次</text>
							<text>{{ hylx.zq }}天有效</text>
						</view>
						<view class="padding-xs flex justify-end">
							<button @click="buyHY(hylx.hylxid)" class="cu-btn bg-main round sm">购买</button>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view v-if="jlpjs.length > 0" class="margin-top bg-white">
			<view class="padding solid-bottom flex justify-between align-baseline">
				<view class="text-orange title">
					<text class="text-xxl  ">
						<text class="cuIcon-edit"></text>
					</text>
					<text>评价</text>
					<text class="">【{{jlpjs.length}}】</text>
				</view>
			</view>
			<view>
				<view class="cu-list menu-avatar">
					<view v-for="(jlpj, index) in jlpjs" :key="index" class="flex justify-start align-center">
						<view class="cu-avatar round lg margin" :style="'background-image:url(' + jlpj.headimg + ');'">
						</view>
						<view class="flex-sub">
							<view class="flex justify-between padding-xs">
								<view class="text-grey">{{ jlpj.nc }}</view>
								<view>
									<uni-rate size="15" readonly="true" v-model="jlpj.count" max="5"></uni-rate>
								</view>
							</view>
							<view class="text-gray text-sm flex padding-xs">
								<view class="text-cut">
									<text>{{ jlpj.content }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view v-if="jlpjs.length < pjPageInfo.total" class="padding flex flex-direction">
					<button @tap="loadMorePj" class="cu-btn bg-main lg">显示更多</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				ajiaolian: {},
				kcnumber: 0,
				pjnumber: 0,
				ahylxs: [],
				jlpjs: [],
				lxmap: this.constant.lxmap,
				kczt: this.constant.kczt.KCZT,
				pjPageInfo: {
					current: 1,
					size: 5,
					total: 0,
				}
			};
		},
		onShareAppMessage: function(){
			return {
				title: this.store.state.title,
				path: '/pages/first?id='+this.store.state.client.clientid
			}
		},
		onLoad: function(option) {
			this.ajiaolian.jlid = option.jlid;
			this.loadData();
			this.loadPj();
		},
		methods: {
			goToKcList: function() {
				let url = "/pages/cxy/kc/search?jlid=" + this.ajiaolian.jlid;
				uni.navigateTo({
					url,
				});
			},
			loadData: function() {
				this.api("/jl/info/get").send({
					jlid: this.ajiaolian.jlid
				}).then(res => {
					console.log(res);
					this.ajiaolian = res.ajiaolian;
					this.kcnumber = res.kcnumber;
					// this.kcs = res.akechengs;
					this.ahylxs = res.ahylxs;
				});
			},
			toKcDetail: function(kcid) {
				uni.navigateTo({
					url: "/pages/cxy/kc/detail?kcid="+kcid
				});
			},
			buyHY: function(hylxid) {
				if (this.store.state.client.yj == 0) {
					this.message.info("请先缴纳保证金");
					return;
				}
				
				if (!this.store.state.client.tx) {
					this.message.info("请先录入头像，否则无法完成扫脸进门");
					return;
				}
				uni.showModal({
					title: '确认',
					content: '确认购买此会员？',
					success: (res) => {
						if (res.confirm) {
							this.api("/client/hy/info").send({
								jlid: this.ajiaolian.jlid,
								hylxid: hylxid,
								clientid: this.store.state.client.clientid
							}).then(data => {
								if (data.ahyjl.amount > 0) {
									this.pay.exePay(JSON.parse(data.ahyjl.prepaydata)).then(data => {
										uni.navigateTo({
											url: "/pages/cxy/hy/lx?hylxid="+hylxid
										});
									});
								} else {
									uni.navigateTo({
										url: "/pages/cxy/hy/lx?hylxid="+hylxid
									});
								}
								
								
							});
						}
					}
				});
			},
			
			loadPj: function() {
				this.api("/jl/pj/page").send({
					current: this.pjPageInfo.current,
					size: this.pjPageInfo.size,
					jlid: this.ajiaolian.jlid
				}).then(data => {
					this.jlpjs = data.ajlpjs.records;
					this.pjPageInfo.total = data.ajlpjs.total;
				});
			},
			loadMorePj: function() {
				this.pjPageInfo.current++;
				this.loadPj();
			}
		}
	};
</script>
<style>
	.kctitle {
		position: absolute;
		bottom: 0;
		width: 100%;
		display: flex;
		align-items: start;
		min-height: 100rpx;
		justify-content: space-between;
		flex-direction: column;
	}

</style>